import './index.scss'
import { LockOutlined, UserOutlined } from '@ant-design/icons'
import { Button, Checkbox, Form, Input, message } from 'antd'
import React, { useState } from 'react'
import { useDispatch } from 'react-redux'
import { setToken } from '@/store/modules/user'
import { useNavigate } from 'react-router-dom'
const Login = () => {
  const dispatch = useDispatch()
  const navigate = useNavigate()

  let username = 'admin'
  let password = '123456'
  let [loading, setLoading] = useState(false)
  const onFinish = (values) => {
    if (values.username === 'admin' && values.password === '123456') {
      setLoading(true)
      setTimeout(() => {
        setLoading(false)
        dispatch(setToken('a123jiscnoayu123ouzdawojopdcaosndhj'))
        message.success('登陆成功')
        navigate('/')
      }, 1000)
    }
  }
  return (
    <div className="bg flex">
      <div className="login_card">
        <Form
          name="normal_login"
          className="login-form"
          initialValues={{
            username,
            password,
            remember: true
          }}
          onFinish={onFinish}
        >
          <Form.Item
            name="username"
            rules={[
              {
                required: true,
                message: '请输入用户名!'
              }
            ]}
          >
            <Input
              prefix={<UserOutlined />}
              placeholder="请输入用户名"
              allowClear
              value={username}
            />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[
              {
                required: true,
                message: '请输入密码!'
              }
            ]}
          >
            <Input
              prefix={<LockOutlined />}
              type="password"
              placeholder="Password"
              allowClear
              value={password}
            />
          </Form.Item>
          <Form.Item>
            <Form.Item name="remember" valuePropName="checked" noStyle>
              <Checkbox>记住我</Checkbox>
            </Form.Item>
          </Form.Item>

          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              className="login-form-button"
              loading={loading}
            >
              Log in
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}

export default Login
